<!DOCTYPE html>
<html>
	<style>
	
		
		
	</style>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align 
		     功能：1.应用于表格【删格布局】
			      2.行内块元素与行内块元素对齐方式
			    理解:文本和图片对齐【垂直居中】
			    元素种类:
				行内元素:典型行内元素 span, a,文本					 特点:在一行内显示,不可设置宽高
				块级元素:典型块级元素 div,p
				 特点：独占一行,可设宽高
				行内块元素:典型行内块元素 img
				特点：在一行内显示,可设宽高
				页面组成：元素之间嵌套生成
				三种元素相互嵌套 √ 嵌套根据元素特点页面混乱
				嵌套条件1：在一行内显示【效果】
					块套行 √    推荐
					行套行 √
					行套块 增加条件，块加宽高,造成页面布局混乱×
					块套块 √
				嵌套条件2:独占一行【效果】	
				    块套行 √    推荐
				    行套行 ×    不可以
				    行套块 ×
				    块套块 √
		-->
		<style>
			/* 抓每个img 
			派生(后代)选择器
			特点:抓取父元素中所有(后代)子元素【元素嵌套特点】
			伪类选择器:
			特点：在选择器后，过滤符合'特定条件'某个元素
		    nth-child选中父元素第N个
			符合条件：p中包含4个img
			id抓取父级元素:空间大
			class抓取父元素中某个子元素:微调
			*/
			p img:nth-child(1){
			    border:10px solid red;	
			}
			p img:nth-child(2){
			    border:20px solid #ff0;	
			}
			/* 标准的抓取每个img的方案 */
			p img.baseline{
				vertical-align: baseline;
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
			    ertical-align: middle;
				/* vertical-align与text-align区别 
				区别1:属性值不同
				    2: vertical-align操作文本和图片垂直
					   text-align操作文本作用和居中以及两边对齐
				*/
				
			}
			p img.bottom{
				vertical-align: bottom;
			}
		</style>	
		
	</head>
	<body>
		<span>行内块元素<div style="border: 1px solid red; height: 10px;"></div></span>
		<h1>垂直方向属性使用 【针对元素种类】</h1>
		<p>治军<img class="baseline" src="img/image_1.png" alt="1人" width="70px" height="130px" />基线对齐</p>
		<p>治军坝<img class="top" src="img/image_2.png" alt="哪吒2" width="80px" height="150px" />顶部对齐</p>
		<p>治军耶<img class="middle" src="img/image_3.png" alt="哪吒3" width="90px" height="170px" />垂直对齐</p>
		<p>治军乃<img class="bottom" src="img/image_4.png" alt="哪吒4" width="100px" height="190px" />底部对齐</p>
		<!-- 需求：垂直方向属性 4个属性值
		     如果不改变现有html结构，可以找到依次四个img
			 抓到四
			 个图片 
			 思路：派生选择器＋伪类选择器
			 p img:nth-child
			 
		 -->
	</body>
</html>